<template>
  <a-table
    class="form-table-data"
    bordered
    :columns="tableData.columns"
    :data-source="tableData.dataSource"
    :scroll="{ x: true }"
    :pagination="false"
    :showHeader="!showSingleRow"
    :transformCellText="({ text, column, record, index }) => text && Array.isArray(text) ? text[0] : text"
    size="small"
    :class="showSingleRow ? (hasColHeader ? 'single-col-row-table' : 'single-row-table') : 'normal-table'"></a-table>
</template>

<script>
  export default {
    name: 'Table',
    props: {
      data: {
        type: Object,
      },
      list: {
        type: Object,
      }
    },
    computed: {
      // 统计项列头
      showColFieldList() {
        return this.data?.showColFieldList || []
      },
      // 是否有列表头
      hasColHeader() {
        return this.data?.formCondMap?.colHeaders
      },
      // 是否是单行且按列显示
      showSingleRow() {
        return this.data?.vertical2 && (this.list?.data?.length === 1 || this.data?.pageSize === 1)
      },
      columns() {
        let header = []
        const formCondMap = this.data.formCondMap
        const rowheader = formCondMap.rowHeaders  // 左侧数据列头
        const coldata = this.list.coldata || []  // 统计维度的数据

        header = rowheader.map(item => {
          return {
            title: item.aliasDisplay,
            width: 'auto',
            dataIndex: item.aliasTableName + '_' + item.name
          }
        })

        if (this.hasColHeader) {
          // 有列表头
          coldata.map((d, index) => {
            let pHead = {
              title: d[0],
              children: []
            }
            this.showColFieldList.map((item, i) => {
              pHead.children.push({
                title: item.display || item.value,
                width: 'auto',
                dataIndex: `col_${index}_${item.name.replace('#', '_')}`
              })
            })
            header.push(pHead)
          })
        } else {
          this.showColFieldList.map((item, i) => {
            header.push({
              title: item.display || item.value,
              width: 'auto',
              dataIndex: item.name.replace('#', '_')
            })
          })
        }
        return header
      },
      columnDataList() {
        const size = this.data.pageSize
        const list = this.list.data || []
        const firstColumnKey = this.columns[0]?.dataIndex

        // 原逻辑，按pagesize的值来展示数据条数
        let dataList = list.slice(0, size) || []

        // 统计项数据适配
        firstColumnKey && dataList.map(item => {
          if (item.rowType === '1') {
            // 合计
            item[firstColumnKey] = $.i18n('common.total.label')
          }
          if (item.rowType === '0') {
            const head = this.columns.filter(d => d.dataIndex === item.rowSumKey)[0]
            head && (item[item.rowSumKey] = $.i18n('datarelation.alert.opener.subtotal.js'))
          }
        })

        return dataList
      },
      tableData() {
        if (this.showSingleRow) {
          // 单行数据展示
          const rowheaderLen = this.data.formCondMap.rowHeaders.length
          const data = this.columnDataList[0] || {}
          let head = []
          let list = []

          if (this.hasColHeader) {
            head = [{
              title: 'head0',
              width: 'auto',
              dataIndex: '_head_0',
              customRender: (value, _, index) => {
                const obj = {
                  children: value,
                  attrs: {}
                }
                if (index < rowheaderLen) {
                  obj.attrs.colSpan = 0
                } else {
                  obj.attrs.colSpan = 1
                  if ((index - rowheaderLen) % this.showColFieldList.length === 0) {
                    obj.attrs.rowSpan = this.showColFieldList.length
                  } else {
                    obj.attrs.rowSpan = 0
                  }
                }
                return obj
              },
              // customCell: () => {
              //   return {
              //     style: {
              //       background: '#e6e6e7'
              //     }
              //   }
              // }
            }, {
              title: 'head1',
              width: 'auto',
              dataIndex: '_head_1',
              customRender: (value, _, index) => {
                const obj = {
                  children: value,
                  attrs: {},
                };
                if (index < rowheaderLen) {
                  obj.attrs.colSpan = 2
                } else {
                  obj.attrs.colSpan = 1
                }
                return obj
              },
              // customCell: () => {
              //   return {
              //     style: {
              //       background: '#e6e6e7'
              //     }
              //   }
              // }
            }, {
              title: 'head2',
              width: 'auto',
              dataIndex: '_head_2'
            }]
            this.columns.map(item => {
              if (item.children && item.children.length) {
                item.children.map(d => {
                  list.push({
                    _head_0: item.title,
                    _head_1: d.title,
                    _head_2: data[d.dataIndex]
                  })
                })
              } else {
                list.push({
                  _head_0: item.title,
                  _head_1: item.title,
                  _head_2: data[item.dataIndex]
                })
              }
            })
            return {
              columns: head,
              dataSource: list
            }
          } else {
            head = [{
              title: 'head0',
              width: 'auto',
              dataIndex: '_head_0',
              // customCell: () => {
              //   return {
              //     style: {
              //       background: '#e6e6e7'
              //     }
              //   }
              // }
            }, {
              title: 'head1',
              width: 'auto',
              dataIndex: '_head_1'
            }]
            this.columns.map(item => {
              list.push({
                _head_0: item.title,
                _head_1: data[item.dataIndex]
              })
            })
            return {
              columns: head,
              dataSource: list
            }
          }
        } else {
          return {
            columns: this.columns,
            dataSource: this.columnDataList
          }
        }
      }
    }
  }
</script>
